<template>
  <div :class="ns.b()">
    <div class="page">
      <div class="page-title">全国碳履约</div>
      <div class="page-content">
        <div class="page-content-screen">
          <div class="screen">
            <vc-filter :menus="screen"/>
          </div>
          <div class="total">
            <span>溯源</span>
            <el-switch
              v-model="isTraceSource"
              size="small"
              class="ml-2"
              style="--el-switch-on-color: #02C680;"
            />
            <span>共计 <sapn style="color: rgba(255, 89, 89, 1)">{{ totalNum }}</sapn> 条</span></div>
        </div>
        <div class="page-content-table">
          <vc-table
            :loading="loading"
            :tableData="tableData"
            :columns="columns"
            :total="totalNum"
            :pageSize="PAGE_SIZE"
            :pageNum="queryData.pageNum"
            :defaultSort="{field:'indicator0',order:'desc'}"
            :maxHeight="maxHeight"
            @page-change="handleCurrentChange"
            @sort-change="sortChange"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 溯源弹窗 -->
  <indicator-source v-model:show="showActionsheet" :actionData="actionSheetData"/>
</template>

<script lang="ts" setup>
import {useNamespace} from 'vc/src/use';
import {getEsg} from '../apis';
import {useTable} from './useTable';
import {useScreen} from './useScreen';
import {calculateTableMaxHeight} from '@/utils';
import IndicatorSource from '@/components/indicator-source/index.vue';

const ns = /* hoist-static*/ useNamespace('carbonCompliance');
defineOptions({name: ns.b()});
const route = useRoute();
const {
  PAGE_SIZE,
  screen,
  queryData,
  runGetYear
} = useScreen();
let maxHeight = $ref(0);

interface sortRule {
  field?: string;
  order?: string
}

runGetYear({
  esgType: 'carbonAppointment'
});
/** 是否溯源 */
let isTraceSource = ref(false);
/** 数量统计 */
const totalNum = ref(0);
/** 表格数据 */
const tableData = ref([]);
/** 接口数据 */
let resData = $ref();
const isPageChange = ref(false);
/** 换页 */
const handleCurrentChange = (val: number) => {
  queryData.pageNum = val;
  isPageChange.value = true;
  run(queryData);
};

/** 指标排序 */
const sortChange = (event: any) => {
  const {column, order} = event;
  const {sortBy, field} = column;
  queryData.pageNum = 1;
  if (field.indexOf('indicator') > -1) {
    queryData.indicatorFiled = order ? `${sortBy || field}` : '';
    queryData.indicatorOrder = order ? order : '';
    queryData.sortRule = '';
  } else {
    queryData.indicatorFiled = '';
    queryData.indicatorOrder = '';
    queryData.sortRule = order ? `${sortBy || field}:${order}` : '';
  }
};

const loading = ref(true);
const {data: esgData, run} = useRequest(getEsg, {
  manual: true,
  defaultParams: [{...queryData}],
  onSuccess(res) {
    resData = res;
    totalNum.value = res.total;
    let newTableData: any = [];
    res.details.forEach((item) => {
      let tableItem = {
        securitiesCode: item.performanceSecurities.securitiesCode,
        securitiesName: item.performanceSecurities.securitiesName,
        companyId: item.performanceSecurities.companyId
      };
      Object.assign(tableItem, item.performanceSecurities.companyInformation, {companyId: item.performanceSecurities.companyId});
      item.indicatorInfo.forEach((indica, index) => {
        tableItem[`indicator${index}`] = indica;
      });
      newTableData.push(tableItem);
    });
    tableData.value = newTableData;
    nextTick(() => {
      loading.value = false;
      // 计算最大高度
      maxHeight = calculateTableMaxHeight();
    });
  }
});
const { columns, showActionsheet, actionSheetData } = useTable(esgData, isTraceSource);

watch(
  () => queryData,
  (val) => {
    loading.value = true;
    if (!isPageChange.value) {
      queryData.pageNum = 1;
    } else {
      isPageChange.value = false;
    }
    run(val);
  },
  {deep: true}
);
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
